(function($) {
    $.fn.imageItem = function(options) {
         options = $.extend({
             
            //подгоняем контейнер под картинку
            resizeToImage: false,
            
            //подгоняем картинку под контейнер
            resizeToElement: true,
            
            //позволяем обрезаь картинку
            crop: true,
            
            //удалять объекты внутри контейнера
            erase: true,

            //позиция картинки относительно контейнера
            position: {
                top: 'middle',
                left: 'center'
            },
            loader: "<table style='width: 100%; height:100%;'><tr><td style='text-align:center; vertical-align: middle;'>Загрузка...</td></tr></table>"
         }, options);
         return this.each(function () {
             var element = $(this);
             //получаем адрес картинки из атрибута rel
             var src = element.attr('src') || element.attr('rel');
             if (!src) return;
             if (options.erase) {
                 element.html('');
             }
             //рисуем лоадер
             var loader = false;
             if (options.loader) {
                loader = $(options.loader).appendTo(element);
             }
             var this_ = this;
             //создаём объект картинки
             var imageData = new Image();
             //создам элемент картинки
             var imageElement = $('<img>');
             //когда обьект будет загружен показываем его
             var showImage = function(img) {
                 if (loader) loader.remove();
                 element.append($(imageData).fadeIn(500));
                 element.trigger('image_loaded',imageData);
             }
             imageData.onerror = function() {
                 if (loader) loader.remove();
                 element.trigger('image_error',this);
             }
             //onLoad объекта
             imageData.onload = function() {
                 //резайзем к картинке
                 if (options.resizeToImage) {
                     $(imageData).css(
                     {
                         width: this.width,
                         height: this.height
                     });
                     element.css(
                     {
                         width: this.width,
                         height: this.height
                     });
                 } else {
                     //позиционируем содержимое контейнера
                     element.css({
                        overflow: "hidden"
                     });
                     //размеры контейнера
                     var size = {
                         width: element.width(),
                         height: element.height()
                     }
                     var width = this.width;
                     var height = this.height;
                     //ресайзим к элементу
                     if (options.resizeToElement && (width > size.width || height > size.height)) {
                         //растягиваем под элемент по минимальной стороне
                         if (width > height) {
                             var k = height / size.height;
                         } else if (width <= height) {
                             var k = width / size.width;
                         }
                         width = Math.round(width / k);
                         height = Math.round(height / k);
                         if (!options.crop){
                             k = 1;
                             if (height > size.height) {
                                 k = height / size.height;
                             } else if (width > size.width) {
                                 k = width / size.width;
                             }
                            width = Math.round(width / k);
                            height = Math.round(height / k);
                         }
                     }
                     var margin = {
                         top: 0,
                         left: 0
                     }
                     switch (options.position.top) {
                         case "bottom": margin.top = size.height - height;
                             break;
                         case "middle": margin.top = (size.height - height) / 2;
                             break;
                     }
                     switch (options.position.left) {
                         case "right": margin.left = size.width - width;
                             break;
                         case "center": margin.left = (size.width - width) / 2;
                             break;
                     }
                     $(imageData).css(
                     {
                         width: width,
                         height: height,
                         marginTop: margin.top,
                         marginLeft: margin.left,
                         display: 'none'
                     });
                 }
                 showImage(this);
             }
             imageData.src = src;
         });
    }
})(jQuery);